<!--
User:muchen
CreateTime:14:47
-->
<template>
  <van-switch v-model="isMatchMode" size="26" id="van-switch1" active-color="#ee0a24">
    <template #node>
      <div class="icon-wrapper">
        <van-icon :name="isMatchMode ? 'like' : 'like-o'" />
      </div>
    </template>
  </van-switch>
  <user-card-list :user-list="userList" :loading="loading" />
  <van-empty v-if="!userList || userList.length < 1" image="search" description="数据为空"/>
  <van-pagination v-model="currentPage" :total-items="ItemCount" :page-count="pages" :items-per-page="8" @change="changePage"/>
</template>
  
  <script setup lang="ts">
    import {onMounted, ref, watchEffect, createApp} from "vue";
    import {useRoute} from "vue-router";
    import {showFailToast, showSuccessToast} from "vant/lib/vant.es";
    import myAxios from "../plugins/myAxios.ts";
    import UserCardList from "../layouts/UserCardList.vue";
    import qs from 'qs';
    import { UserType } from "../models/user";
  
    const route = useRoute();
    const {tags} = route.query;
    let currentPage = ref();
    const loading = ref(true);
    const userList = ref([]); //用户列表
    const isMatchMode = ref<boolean>(false);
    let ItemCount = ref();
    let pages = ref();
    
    /**
    * 加载数据
    */
    const loadData = async (val: number) => {
      loading.value = true;
      let userListData;
      // 心动模式，根据标签匹配用户
      if (isMatchMode.value) {
        const num = 10;
        userListData = await myAxios.get('/user/match', {
          params: {
            num,
          },
        })
          .then(function (response) {
            console.log('/user/match succeed', response);
            if(response.code === 40001) {
              showFailToast(response.description);
            }
            pages.value = response.data.pages;
            return response?.data;
          })
          .catch(function (error) {
            console.error('/user/match error', error);
            showFailToast('请求失败');
          })
      } else {
        // 普通模式，直接分页查询用户
        userListData = await myAxios.get('/user/recommend', {
          params: {
            pageSize: 8,
            pageNum: val,
          },
        })
          .then(function (response) {
            console.log('/user/recommend succeed', response);
            pages.value = response.data?.pages;
            ItemCount.value = response.data?.total;
            return response?.data?.records;
          })
          .catch(function (error) {
            console.error('/user/recommend error', error);
            showFailToast('请求失败');
          })
      }
      if (userListData) {
        userListData.forEach((user: UserType) => {
          if (user.tags) {
            user.tags = JSON.parse(user.tags);
          }
        })
        userList.value = userListData;
      }
      loading.value = false;
    }

    const changePage = async() => {
      loadData(currentPage.value);
      console.log(currentPage.value)
    }

    onMounted(async () => {
      loadData(1);
    })

/*   watchEffect(() => {
    loadData();
  }) */
  </script>
  
  <style scoped>
    #van-switch1{
      position: fixed;
      z-index: 9999;
      bottom: 60px;
      right: 0%;
      display: flex;
    }

    #content{
        padding-bottom: 50px;
    }
    .icon-wrapper {
      display: flex;
      width: 100%;
      justify-content: center;
      font-size: 18px;
    }

    .icon-wrapper .van-icon-like {
      line-height: 24px;
      color: var(--van-red);
    }

    .icon-wrapper .van-icon-like-o {
      line-height: 24px;
      color: var(--van-gray-5);
    }
  </style>